import React, {PureComponent} from 'react';
import _ from 'lodash'

class PureComponentDemo extends PureComponent {

    state = {
        name: '名字'
    }

    render() {
        console.log('PureComponentDemo组件渲染')
        return (
            <div style={{padding:'20px'}}>
                <h1>PureComponentDemo</h1>
                <p>
                    {this.state.name}
                    <button onClick={this.setName}>修改名字</button>
                </p>
                <UserInfo/>
            </div>
        );
    }

    setName = () => {
        this.setState({
            name: '小名' + _.uniqueId()
        })
    };
}

// PureComponent：
// 只有内容修改了才会渲染，如果你重复点击按钮，设置的内容没有变，组件就不会重新执行渲染
// 同样的，如果子组件内容没有变化，子组件也不会重新渲染
class UserInfo extends PureComponent {
    render() {
        console.log('UserInfo组件渲染')
        return (
            <>
                <h2>UserInfo子组件</h2>
                <p>PureComponent只有内容修改了才会渲染，如果你重复点击按钮，设置的内容没有变，组件就不会重新执行渲染。</p>
                <p>同样的，如果子组件内容没有变化，子组件也不会重新渲染。</p>
            </>
        )
    }
}

export default PureComponentDemo;
